<style>
  .picImg {
    width: 40px;
    height: 40px;
  }
  .el-dialog {
    width: 1100px;
  }
</style>
<template>
  <div class="app-container">
    <!--&lt;!&ndash; 查询和其他操作 &ndash;&gt;-->
    <div class="filter-container">

      <div class="handle-add" style="height: 605px">
        <el-button class="filter-item" type="primary" icon="el-icon-edit"
                   @click="handleAdd">新增
        </el-button>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row
                  :header-cell-style="{background:'#92D3FF',color:'#fff'}">
          <el-table-column align="center" min-width="120" label="统一信用代码" prop="bankCode"/>
          <el-table-column align="center" min-width="100" label="公司名称" prop="bankName"/>
          <el-table-column align="center" min-width="120" label="公司所属省份" prop="province"/>
          <el-table-column align="center" min-width="120" label="公司详细地址" prop="address"/>
          <el-table-column align="center" min-width="120" label="邮政编码" prop="postcode"/>
          <el-table-column align="center" min-width="120" label="行业分类编码" prop="industry"/>
          <el-table-column align="center" min-width="120" label="企业类型编码" prop="typeCode"/>
          <el-table-column align="center" min-width="120" label="企业细类编码" prop="detailCode"/>
          <el-table-column align="center" min-width="100" label="中征码" prop="loanCardNo"/>
          <el-table-column align="center" min-width="140" label="法人姓名" prop="legalName"/>
          <el-table-column align="center" min-width="140" label="法人证件号码" prop="legalID"/>
          <el-table-column align="center" min-width="170" label="法人手机号" prop="legalMobile"/>
          <el-table-column align="center" min-width="150" label="法人证件登记日期" prop="legalIDRegDate"/>
          <el-table-column align="center" min-width="150" label="法人证件到期日期" prop="legalIDExpiry"/>
          <el-table-column align="center" min-width="170" label="法人证件签发城市代码" prop="legalIDCity"/>
          <el-table-column align="center" min-width="150" label="执照证件注册日期" prop="certRegDate"/>
          <el-table-column align="center" min-width="150" label="执照证件到期日期" prop="certExpiryDate"/>
          <el-table-column align="center" min-width="130" label="证件签发城市" prop="certRegCity"/>
          <!--<el-table-column align="center" min-width="120" label="营业执照扫描件" prop="bankName"/>
          <el-table-column align="center" min-width="170" label="法定代表人身份证正面" prop="bankName"/>
          <el-table-column align="center" min-width="170" label="法定代表人身份证反面" prop="bankName"/>-->
          <el-table-column align="center" label="操作" width="150" class-name="small-padding fixed-width">
            <el-button type="primary" size="mini"
                       @click="handleEdit(scope.row)">修改
            </el-button>
            <!--<template slot-scope="scope">
              <el-popover
                placement="top"
                width="200"
                trigger="manual"
                :ref="'popover-' + scope.row.bankCode">
                <p>确定删除该数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$refs[`popover-` + scope.row.bankCode].doClose()">取消</el-button>
                  <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
                </div>
                <el-button type="danger" size="mini" slot="reference" @click="$refs[`popover-` + scope.row.bankCode].doShow()">删除</el-button>
              </el-popover>
            </template>-->
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                    @pagination="getList"/>
        <!-- 分配订单对话框 -->
        <el-dialog :visible.sync="editDialogVisible" :title="textMap[dialogStatus]" :close-on-click-modal="false">
          <el-form ref="editForm" :rules="editFormRules" :model="editForm" status-icon label-position="right"
                   label-width="160px" style="width: 900px; margin-left:50px;display: flex">
            <div style="flex: 1;margin-right: 50px">
              <el-form-item label="统一信用代码" prop="unicode">
                <el-input :disabled="dialogStatus=='update'" v-model="editForm.unicode" placeholder="请输入统一信用代码"/>
              </el-form-item>
              <el-form-item label="公司名称" prop="companyName">
                <el-input v-model="editForm.companyName" auto-complete="off" placeholder="请输入公司名称"/>
              </el-form-item>
              <el-form-item label="公司所属省份" prop="province">
                <!--<el-input v-model="editForm.province" auto-complete="off" placeholder="请输入公司所属省份"/>-->
                <el-cascader style="width:100%"
                             :options="citys"
                             v-model="editForm.province"
                             @active-item-change="handleItemChange"></el-cascader>
              </el-form-item>
              <el-form-item label="公司详细地址" prop="address">
                <el-input v-model="editForm.address" auto-complete="off" placeholder="请输入公司详细地址"/>
              </el-form-item>
              <el-form-item label="邮政编码" prop="postcode">
                <el-input v-model="editForm.postcode" auto-complete="off" placeholder="请输入邮政编码"/>
              </el-form-item>
              <el-form-item label="行业分类编码" prop="industry">
                <!-- <el-input v-model="editForm.industry" auto-complete="off" placeholder="请输入行业分类编码"/>-->
                <el-select v-model="editForm.industry" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in companys"
                    :key="item.number"
                    :label="item.name"
                    :value="item.number"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业类型编码" prop="typeCode">
                <!--<el-input v-model="editForm.typeCode" auto-complete="off" placeholder="请输入企业类型编码"/>-->
                <el-select v-model="editForm.typeCode" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in typeCode"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业细类编码" prop="detailCode">
                <!--<el-input v-model="editForm.detailCode" auto-complete="off" placeholder="请输入企业细类编码"/>-->
                <el-select v-model="editForm.detailCode" placeholder="请选择" filterable>
                  <el-option
                    v-for="item in CodeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="中征码" prop="loanCardNo">
                <el-input v-model="editForm.loanCardNo" auto-complete="off" placeholder="请输入中征码"/>
              </el-form-item>
              <el-form-item label="法人姓名" prop="legalName">
                <el-input v-model="editForm.legalName" auto-complete="off" placeholder="请输入法人姓名"/>
              </el-form-item>
              <el-form-item label="法定代表人身份证正面" prop="legalIDFront">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="string"
                  :before-upload="beforeUploadFile"
                  :http-request="doUpload"
                  :file-list="fileList"
                  :limit="1"
                  name="legalIDFront"
                  list-type="picture"
                  :auto-upload="false">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
                </el-upload>
              </el-form-item>
            </div>
            <div style="flex: 1;">
              <el-form-item label="法定代表人身份证反面" prop="legalIDBack">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="string"
                  :before-upload="beforeUploadFile"
                  :http-request="doUpload"
                  :file-list="fileList"
                  :limit="1"
                  name="legalIDBack"
                  list-type="picture"
                  :auto-upload="false">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="法人证件号码" prop="legalID">
                <el-input v-model="editForm.legalID" auto-complete="off" placeholder="请输入法人证件号码"/>
              </el-form-item>
              <el-form-item label="法人手机号" prop="legalMobile">
                <el-input v-model="editForm.legalMobile" auto-complete="off" placeholder="请输入法人手机号"/>
              </el-form-item>
              <el-form-item label="法人证件登记日期" prop="legalIDRegDate">
                <!--<el-input v-model="editForm.legalIDRegDate" auto-complete="off" placeholder="请输入法人证件登记日期"/>-->
                <el-date-picker
                  v-model="listQuery.legalIDRegDate"
                  type="date"
                  placeholder="法人证件登记日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="法人证件到期日期" prop="legalIDExpiry">
                <el-date-picker
                  v-model="listQuery.legalIDExpiry"
                  type="date"
                  placeholder="法人证件到期日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="法人证件签发城市代码" prop="legalIDCity">
                <!--<el-input v-model="editForm.legalIDCity" auto-complete="off" placeholder="请输入法人证件签发城市代码"/>-->
                <el-cascader style="width:100%"
                             :options="citys"
                             v-model="editForm.legalIDCity"
                             @active-item-change="handleItemChange"></el-cascader>
              </el-form-item>
              </el-form-item>
              <el-form-item label="企业统一执照扫描件" prop="businessLicense">
                <!--<el-input v-model="editForm.businessLicense" auto-complete="off" placeholder="请上传营业执照扫描件"/>-->
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="string"
                  :before-upload="beforeUploadFile"
                  :http-request="doUpload"
                  :file-list="fileList"
                  :limit="1"
                  name="businessLicense"
                  list-type="picture"
                  :auto-upload="false">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5M</div>
                </el-upload>
              </el-form-item>
              <el-form-item label="执照证件注册日期" prop="certRegDate">
                <el-date-picker
                  v-model="listQuery.certRegDate"
                  type="date"
                  placeholder="执照证件注册日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="执照证件到期日期" prop="certExpiryDate">
                <el-date-picker
                  v-model="listQuery.certExpiryDate"
                  type="date"
                  placeholder="执照证件到期日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="证件签发城市" prop="certRegCity">
                <!--<el-input v-model="editForm.certRegCity" auto-complete="off" placeholder="请输入证件签发城市"/>-->
                <el-cascader style="width:100%"
                             :options="citys"
                             v-model="editForm.certRegCity"
                             @active-item-change="handleItemChange"></el-cascader>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取消</el-button>
            <el-button v-if="dialogStatus=='create'" type="primary" @click="$refs.upload.submit()">确定</el-button>
            <el-button v-else type="primary" @click="doEdit">确定</el-button>
          </div>
        </el-dialog>
      </div>

    </div>
  </div>
</template>

<script>
  import {doGet, doPost, doFile} from '@/api'
  import { typeCode } from '@/utils/type'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  export default {
    name: 'bank',
    components: {Pagination},
    filters: {},
    data() {
      return {
        list: [],
        citys: [],
        area: [],
        companys: [],
        CodeList: [],
        total: 0,
        listLoading: true,
        listQuery: {
          pageNum: 1,
          pageSize: 20,
        },
        editForm: {
          unicode: '',
          companyName: '',
          province: '',
          address: '',
          postcode: '',
          industry: '',
          typeCode: '',
          detailCode: '',
          loanCardNo: '',
          legalIDFront: '',
          legalIDBack: '',
          legalName: '',
          legalID: '',
          legalMobile: '',
          legalIDRegDate: undefined,
          legalIDExpiry: undefined,
          legalIDCity: '',
          businessLicense: '',
          certRegDate: undefined,
          certExpiryDate: undefined,
          certRegCity: '',
          provinceAndCity: ''
        },
        editFormRules: {
          bankCode: [{required: true, message: '银行编码不允许为空', trigger: 'blur'}],
          bankName: [{required: true, message: '银行名称不允许为空', trigger: 'blur'}]
        },
        editDialogVisible: false,
        textMap: {
          update: '编辑',
          create: '新增公司信息'
        },
        dialogStatus: undefined,
        fileList: [],
        typeCode: typeCode,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        doGet('personal.html?op=compinfo', this.listQuery).then(response => {
          this.list = response.rows
          /*this.total = response.data.totalcount*/
          this.listLoading = false
        }).catch(() => {
          this.list = []
          /*this.total = 0*/
          this.listLoading = false
        })
      },
      getIndustry() {
        doGet('company.html?op=getIndustryList').then(response => {
          this.companys = response.rows
        }).catch(() => {
          this.companys = []
        })
      },
      getDetail() {
        doGet('company.html?op=getDetailCodeList').then(response => {
          this.CodeList = response.rows
        }).catch(() => {
          this.CodeList = []
        })
      },
      handleAdd() {
        this.provinceList()
        this.getIndustry()
        this.getDetail()
        this.editDialogVisible = true
        this.dialogStatus = 'create'
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
        let size = file.size / 1024 / 1024
        if (extension !== 'jpg' && extension !== 'png') {
          this.$notify.warning({
            title: '警告',
            message: `只能上传png（即后缀是.jpg或.png）的文件`
          })
          return false
        }
      },
      doUpload(param) {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            let fd = new FormData()
            fd.append('legalIDFront', param.file)    //传文件\
            fd.append('legalIDBack', param.file)
            fd.append('businessLicense', param.file)
            fd.append('unicode', this.editForm.unicode)
            fd.append('companyName', this.editForm.companyName)
            fd.append('province', this.editForm.province)
            fd.append('address', this.editForm.address)
            fd.append('postcode', this.editForm.postcode)
            fd.append('industry', this.editForm.industry)
            fd.append('typeCode', this.editForm.typeCode)
            fd.append('detailCode', this.editForm.detailCode)
            fd.append('loanCardNo', this.editForm.loanCardNo)
            fd.append('legalName', this.editForm.legalName)
            fd.append('legalID', this.editForm.legalID)
            fd.append('legalMobile', this.editForm.legalMobile)
            fd.append('legalIDRegDate', this.editForm.legalIDRegDate)
            fd.append('legalIDExpiry', this.editForm.legalIDExpiry)
            fd.append('legalIDCity', this.editForm.legalIDCity)
            fd.append('certRegDate', this.editForm.certRegDate)
            fd.append('certExpiryDate', this.editForm.certExpiryDate)
            fd.append('certRegCity', this.editForm.certRegCity)
            doFile('company.html?op=addcompany', fd).then((res) => {
              this.getList()
              this.editDialogVisible = false
              this.$notify.success({
                title: '成功',
                message: '注册公司成功'
              })
            })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      handleEdit(row) {
        this.editForm = Object.assign({}, row)
        this.editForm.provinceAndCity = [row.province, row.city]
        this.editIndex = this.list.indexOf(row)
        this.dialogStatus = 'update'
        this.editDialogVisible = true
        this.$nextTick(() => {
          this.$refs['editForm'].clearValidate()
        })
      },
      doEdit() {
        this.$refs['editForm'].validate(valid => {
          if (valid) {
            let sendData = {
              ...this.editForm,
              province: this.editForm.provinceAndCity[0],
              city: this.editForm.provinceAndCity[1]
            }
            doGet('company.html?op=chgcompany', sendData)
              .then(response => {
                this.getList()
                this.editDialogVisible = false
                this.list[this.editIndex] = this.editForm
                this.$notify.success({
                  title: '成功',
                  message: '修改成功'
                })
              })
              .catch(response => {
                this.$notify.error({
                  title: '失败',
                  message: response.message
                })
              })
          }
        })
      },
      //省城市
      provinceList() {
        doGet('company.html?op=getProvinceData', { flag: 1 }).then(response => {
          this.citys = response.rows.map(item => {
            return {
              value: item.procode,
              label: item.proname,
              children: []
            }
          })
        }).catch(() => {
          this.citys = []
        })
      },
      //触发
      handleItemChange(val) {
        let bankArr = this.citys.filter(item => {
          return item.value == val
        })[0]
        if (!bankArr.children.length) {
          doGet('company.html?op=getProvinceData', { flag: 2, procode: bankArr.value }).then(response => {
            this.citys.forEach(item => {
              if (item.value == val) {
                item.children = response.rows.map(items => {
                  return {
                    value: items.procode,
                    label: items.proname,
                    /*children: []*/
                  }
                })
              }
            })
          }).catch(() => {
          })
        }
      },
      /*doDelete(row) {
        doGet("bank.html?op=del", row)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
            this.total--
            this.$refs[`popover-` + row.bankCode].doClose()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
          })
      },*/
    }
  }
</script>
